import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:t3_data_service/biz_data_source/map/address/poi_search/model/t3_poi_enums.dart';
import 'package:t3_map/map_selected/widget/confusion_points_widget.dart';
import 'package:uikit/uikit.dart';

import '../../configs/map_select_config.dart';
import '../../poi_search/view_model/poi_search_cell_view_model.dart';
import '../view_model/bottom_selected_poi_view_model.dart';

class BottomSelectedPOIWidget extends StatelessWidget {
  final MapSelectConfig config;
  final BottomSelectedPOIViewModel viewModel;
  final ValueChanged<int> clickIndexCallback;
  final ValueChanged<int> clickCufusionIndexCallback;
  final VoidCallback clickSureCallback;

  const BottomSelectedPOIWidget({
    Key? key,
    required this.viewModel,
    required this.config,
    required this.clickIndexCallback,
    required this.clickSureCallback,
    required this.clickCufusionIndexCallback
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var isStartPoint = config.pointType == T3POIType.start;
    return Column(
      children: [
        Container(
          width: MediaQuery.of(context).size.width,
          decoration: const BoxDecoration(
            color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(24),
                topRight: Radius.circular(24),
              ),
          ),
          child: Obx(() {
            if (viewModel.singlePointPOI.value.isValid) {
              return _buildPointsWidget(context, isStartPoint);
            } else {
              if ((config.confusionPoints ?? []).isNotEmpty) {
                return ConfusionPointsWidget(
                    list: (config.confusionPoints ?? []).map((e) => POISearchCellViewModel(e, config)).toList(),
                    clickIndex: (index) {
                      clickCufusionIndexCallback(index);
                    },
                    config: config
                );
              }
              return _buildGuideWidget(context);
            }
          })
        ),
      ],
    );
  }

  Column _buildGuideWidget(BuildContext context) {
    return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(
                  height: 24,
                ),
                const Padding(
                  padding: EdgeInsets.only(left: 20.0),
                  child: SizedBox(
                    height: 20,
                    child: Text(
                      "您当前选择的位置",
                      style: TextStyle(
                        color: LucyColors.lucy_02102A,
                        fontWeight: LucyFonts.regular,
                        fontSize: 14,
                      ),
                    ),
                  ),
                ),
                const SizedBox(
                  height: 4,
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 20.0),
                  child: SizedBox(
                    height: 26,
                    width: MediaQuery.of(context).size.width - 40,
                    child: const Text(
                      '请拖动地图选择想要到达的地方',
                      style: TextStyle(
                          color: LucyColors.lucy_02102A,
                          fontWeight: LucyFonts.medium,
                          fontSize: 20,
                          overflow: TextOverflow.ellipsis
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 28 + MediaQuery.of(context).padding.bottom,
                ),
              ],
            );
  }

  Stack _buildPointsWidget(BuildContext context, bool isStartPoint) {
    return Stack(
              children: [
                Positioned(
                  top: 1,
                  child: SizedBox(
                    width: MediaQuery.of(context).size.width,
                    height: 88 * MediaQuery.of(context).size.width / 375,
                    child: ClipRRect(
                        borderRadius: const BorderRadius.only(
                          topLeft: Radius.circular(24),
                          topRight: Radius.circular(24),
                        ),
                        child: T3Image.t3assets(T3AssetsName.map_bg_custom, fit: BoxFit.cover)
                    ),
                  ),
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(
                      height: 20,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 20.0),
                      child: SizedBox(
                        height: 20,
                        child: Text(
                          isStartPoint ? "您当前选择的上车位置" : "您当前选择的位置",
                          style: const TextStyle(
                            color: LucyColors.lucy_02102A,
                            fontWeight: LucyFonts.regular,
                            fontSize: 14,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 4,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 20.0),
                      child: Obx(() {
                        return SizedBox(
                          height: 26,
                          width: MediaQuery.of(context).size.width - 40,
                          child: Text(
                            viewModel.singlePointPOI.value.address ?? '',
                            style: const TextStyle(
                                color: LucyColors.lucy_02102A,
                                fontWeight: LucyFonts.medium,
                                fontSize: 20,
                                overflow: TextOverflow.ellipsis
                            ),
                          ),
                        );
                      }),
                    ),
                    const SizedBox(
                      height: 4,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 20.0),
                      child: Text(
                        isStartPoint ? "拖动到小圆点或路边接驾更快" : "拖动地图可更改选择的位置",
                        style: const TextStyle(
                          color: Color(0xff777a84),
                          fontWeight: LucyFonts.regular,
                          fontSize: 14,
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    Obx(() {
                      if (viewModel.points.value.isNotEmpty) {
                        var count = viewModel.points.value.length.toDouble();
                        if (count > 3) {
                          count = 3.5;
                        }
                        return SizedBox(
                          height: count * 56,
                          width: MediaQuery.of(context).size.width,
                          child: ListView(
                            children: _buildPointCells(context),
                            itemExtent: 56,
                            padding: const EdgeInsets.only(left: 20, right: 20),
                          ),
                        );
                      } else {
                        return const SizedBox();
                      }
                    }),
                    Obx(() {
                      return SizedBox(height: viewModel.points.value.isNotEmpty ? 16 : 0,);
                    }),
                    Padding(
                      padding: const EdgeInsets.only(left: 16.0),
                      child: SizedBox(
                        width: MediaQuery.of(context).size.width - 32,
                        height: 52,
                        child: Obx(() {
                          return LucyMainButton(
                              text: isStartPoint ? "确认上车点" : "确认下车点",
                              isEnabled: viewModel.buttonEnable.value,
                              onPressed: clickSureCallback,
                              scale: LucyButtonScale.large
                          );
                        }),
                      ),
                    ),
                    SizedBox(
                      height: 20 + MediaQuery.of(context).padding.bottom,
                    ),
                  ],
                ),
              ],
            );
  }

  _buildPointCells(BuildContext context) {
    return viewModel.points.value.map((e) {
      return T3GestureDetector(
        onTap: () {
          clickIndexCallback(e.index);
        },
        child: SizedBox(
          height: 56,
          child: Column(
            children: [
              Container(
                height: 48,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  color: e.index == viewModel.selectedPoint.value.index ? Colors.white : const Color(0xFFF7F8FC),
                  border: Border.all(
                      color: e.index == viewModel.selectedPoint.value.index
                          ? const Color(0xFFFF8533)
                          : const Color(0xFFF7F8FC),
                    width: 1,
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.only(top: 13.0, bottom: 13, left: 16),
                  child: SizedBox(
                    width: MediaQuery.of(context).size.width - 40,
                    child: Text(
                      e.name,
                      style: TextStyle(
                        color: e.index == viewModel.selectedPoint.value.index
                            ? const Color(0xFFFF8533)
                            : const Color(0xFF1D2232),
                        fontSize: 16,
                        fontWeight: LucyFonts.medium,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                ),
              ),
              Container(height: 8,),
            ],
          ),
        ),
      );
    }).toList();
  }
}
